<template>
  <!-- 关联的问题 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="problemNo"
      :tool-button="false"
      :pagination="false"
      :height="list.length == 0 ? 200 : list.length < 9 ? '' : 400"
    >
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="AssociationQuestionList">
import { ref, computed, watch } from "vue";

import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";

import { getChangeRelatedProblem } from "@/api/modules/changeManagement";
import { findProblemPager } from "@/api/modules/assetManagement";

import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();

const props = defineProps({
  eno: Number || String,
  ciId: Number || String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = computed(() => {
  let list = ref<any[]>([]);
  if (props.eno) {
    list.value = [
      { prop: "problemNo", label: "编号" },
      { prop: "etitle", label: "标题" },
      { prop: "categoryName", label: "分类" },
      { prop: "assignName", label: "指派给" },
      { prop: "priorityName", label: "优先级" },
      { prop: "createdByName", label: "报告人" }
    ];
  } else if (props.ciId) {
    list.value = [
      { prop: "problemNo", label: "编号" },
      { prop: "etitle", label: "标题" },
      { prop: "categoryName", label: "分类" },
      { prop: "assignName", label: "指派给" },
      { prop: "priorityName", label: "优先级" },
      { prop: "createdByName", label: "报告人" }
      // { prop: "createdOn", label: "报告时间" },
      // { prop: "statusName", label: "状态" }
    ];
  }
  return list.value;
});

const list = ref<any[]>([]);
const loading = ref(true);

const getList = () => {
  if (props.eno) {
    // 事件、变更、问题
    getChangeRelatedProblem({
      eno: props.eno,
      _search: false,
      nd: new Date().getTime(),
      sidx: "eno",
      sord: "desc",
      page: 1,
      rows: 20
    })
      .then((res: any) => {
        loading.value = false;
        list.value = res.data || [];
      })
      .catch(() => {
        loading.value = false;
      });
  } else if (props.ciId) {
    // 资产
    let txt = `queryDTO.ciId=${props.ciId}&queryDTO.lastUpdater=${userStore.username}`;
    findProblemPager(txt, {
      _search: false,
      nd: new Date().getTime(),
      sidx: "eno",
      sord: "desc",
      page: 1,
      rows: 20
    })
      .then((res: any) => {
        loading.value = false;
        list.value = res.data || [];
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    list.value = [];
  }
};

getList();

watch(
  () => props.eno,
  () => {
    getList();
  }
);

watch(
  () => props.ciId,
  () => {
    getList();
  }
);
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
